<template>
	<view>
		<view class="mainView">
			<!-- 搜索栏 -->
			<view class="searchBar">
				<input class="input" v-model="value" placeholder="请输入物品名称" :focus="focus" @confirm="onSearch(value)" confirm-type="search" />
			</view>
			<!-- 找到结果 -->
			<view class="ansView" v-if="!notSearch&&showAns&&ans.length>0&&ans[0].name==search">
				<view class="ansCard">
					<myCard @myClick="showInfo(ans[0])" height="200rpx" width="680rpx" shadow="20rpx" load="1s" borderRadius="50rpx" :bkColor="cordColor[ans[0].type]" :hoverColor="cordColor[ans[0].type]" :label="ans[0].name" fontSize="60rpx" iconFontSize="25rpx" fontColor="#ffffff" fontWight="800" :src="iconInfo[ans[0].type].src" :iconLabel="iconInfo[ans[0].type].label"></myCard>
				</view>
			</view>
			<!-- 没找到结果 -->
			<view v-if="!notSearch&&showAns&&(ans.length==0||ans[0].name!=search)" class="haveNoView">
				<image class="haveNoImage" :src="haveNoSrc"></image>
				<view class="feddback" @click="onClickFeedback">点我反馈</view>
				<view v-if="ans.length>0" style="text-align: left;margin-top: 20rpx;">
					<text style="position: relative;left: 10rpx;font-weight: 800; display: block;">相关物品</text>
					<view class="ansCard" v-for="(item,index) in ans" :key="index" >
						<myCard @myClick="showInfo(item)" height="200rpx" width="680rpx" shadow="20rpx" load="1s" borderRadius="50rpx" :bkColor="cordColor[item.type]" :hoverColor="cordColor[item.type]" :label="item.name" fontSize="60rpx" iconFontSize="25rpx" fontColor="#ffffff" fontWight="800" :src="iconInfo[item.type].src" :iconLabel="iconInfo[item.type].label"></myCard>
					</view>
				</view>
			</view>
			<!-- 热门 -->
			<view class="hotRubbish" v-if="hot.length>0">
				<image class="hotImage" :src="hotSrc"></image>
				<text style="position: relative;left: 10rpx;font-weight: 800;">大家都在搜</text>
				<view>
					<button v-for="(item,index) in hot" :key="index" :class="rubbishClass[item.type]" size="mini" plain @click="onSearch(item.name+'')">{{item.name}}</button>
				</view>
			</view>
			<myInfo v-if="showInfoView" :info="nowShowInfo" @onClickCover="closeInfo"></myInfo>
		</view>
		<view class="safeView"></view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				hot:[],
				ans:[],
				notSearch:true,
				showAns:true,
				focus:true,
				showInfoView:false,
				nowShowInfo:{},
				value:'',
				search:'',
				rubbishClass:this.myConfig.typeName,
				iconInfo:this.myConfig.iconInfo,
				cordColor:this.myConfig.cordColor,
				hotSrc:this.myConfig.storageUrl+'/static/hot.png',
				haveNoSrc:this.myConfig.storageUrl+'/static/haveNo.png',
				serachSrc:this.myConfig.storageUrl+'/static/go.png'
			}
		},
		onLoad(para){
			const that=this;
			if(para.hasOwnProperty('value')){
				that.value=para.value;
				that.focus=false;
				that.onSearch(that.value);
			}
			wx.request({
				url:that.myConfig.hostUrl+'/api/getHot.php',
				success:function(res){
					console.log(res);
					that.hot=res.data.hot;
				}
			})
		},
		methods:{
			//点击搜索
			onSearch(name){
				const that=this;
				if(name=='')
					return ;
				that.notSearch=false;
				that.value=name;
				that.search=that.value;
				that.showAns=false;
				wx.showLoading({
				  title:'loading...',
				  mask:true
				});
				wx.request({
					url:that.myConfig.hostUrl+'/api/search.php',
					method:'POST',
					data:{
						openId:that.myConfig.openId,
						name:that.search
					},
					success:function(ress){
						console.log('search',ress);
						if(ress.data.errCode==200){
							setTimeout(function(){
								wx.hideLoading();
								that.ans=ress.data.ans;
								that.showAns=true;
							},200);
						}else if(ress.data.errCode==403){
							wx.hideLoading();
							wx.reLaunch({
							  url: '/pages/index/index'
							});
						}else{
							wx.hideLoading();
							wx.showToast({
								title:'网络好像不太好',
								icon:'none',
								duration:1200
							});
						}
					},
					fail:function(){
						wx.hideLoading();
						wx.showToast({
							title:'网络好像不太好',
							icon:'none',
							duration:1200
						});
					}
				});
			},
			onClickFeedback(){
				wx.navigateTo({
					url:'/pages/feedback/feedback'
				});
			},
			showInfo(item){
				const that=this;
				that.nowShowInfo=item;
				that.showInfoView=true;
			},
			closeInfo(){
				const that=this;
				that.showInfoView=false;
			}
		}
	}
</script>
<style scoped>
	.mainView{
		padding: 25rpx;
	}
	.searchBar{
		display: flex;
		justify-content:space-around;
		align-items: center;
	}
	.input{
		display: inline-block;
		width: 550rpx;
		padding: 10rpx 50rpx;
		border-radius: 50rpx;
		text-align: center;
		position: relative;
		box-shadow: 0 0 5rpx 0 #666666;;
		background-color: #e1e1e1;
	}
	.searchIamge{
		height: 60rpx;
		width: 60rpx;
	}
	.ansView{
		margin-top: 20rpx;
	}
	.ansCard{
		margin-top: 30rpx;
		position: relative;
		animation: upMove 0.8s ease;
	}
	.haveNoView{
		text-align: center;
		margin-top: 20rpx;
	}
	.haveNoImage{
		width: 5rem;
		height: 5rem;
		animation: load 0.8s linear;
	}
	.feddback{
		font-size: 35rpx;
		color: #B2D1FF;
	}
	.hotRubbish{
		position: relative;
		margin-top: 20rpx;
		animation: load 1.2s linear, upMove 1.2s ease;
	}
	.hotImage{
		width: 0.9rem;
		height: 0.9rem;
	}
	.Recyclable{
		margin: 10rpx;
		color: var(--rubbish-recyclable);
		border-color: var(--rubbish-recyclable);
	}
	.food{
		margin: 10rpx;
		color: var(--rubbish-food);
		border-color: var(--rubbish-food);
	}
	.hazardous{
		margin: 10rpx;
		color: var(--rubbish-hazardous);
		border-color: var(--rubbish-hazardous);
	}
	.other{
		margin: 10rpx;
		color: var(--rubbish-other);
		border-color: var(--rubbish-other);
	}
</style>
